<script setup>
import { Down, Drag, Delete, Add, Copy } from '@icon-park/vue-next'
import { VueDraggable } from 'vue-draggable-plus'
import { ref, computed } from 'vue'
import {
  addCanvasPage,
  copyCanvasPage,
  delCanvasPage,
  sortCanvasPages
} from '@/api/graph.js'
import { useGraphStore } from '@/store/modules/graphStore.js'
import { Message, Modal } from '@arco-design/web-vue'
const isToggle = ref(true)
const graphStore = useGraphStore()
const { onChangePage, graph, savePage } = graphStore
const canvasKey = graph.info.canvasKey
const pageList = computed(() => {
  return graph.pageList || []
})
const activePageId = computed(() => {
  return graph.activePageId
})
const getPageList = async () => {
  await graphStore.getPageList()
}
const handleClickAddPage = async () => {
  const length = pageList.value.length
  if (length >= 4) {
    Message.warning('最多 4 个画布页')
    return false
  }
  await addCanvasPage(canvasKey)
  await getPageList()
}
const handleDelCanvasPage = async (item) => {
  await delCanvasPage(item.id)
  Message.success('删除成功')
  await getPageList()
  const length = pageList.value.length
  if (length) {
    await onChangePage(pageList.value[0])
  }
}
const handleCopyCanvasPage = async (item) => {
  const length = pageList.value.length
  if (length >= 4) {
    Message.warning('最多 4 个画布页')
    return false
  }
  await copyCanvasPage(item.id)
  Message.success('复制成功')
  await getPageList()
}
const handleSortCanvasPage = async () => {
  const sortId = pageList.value
    .map((v, index) => `${v.id}#${index + 1}`)
    .join(',')
  await sortCanvasPages(sortId, canvasKey)
  Message.success('调整顺序成功')
}

const handleChangePage = async (item) => {
  if (activePageId.value === item.id) return false
  try {
    let okLoading = false
    Modal.warning({
      title: '提示',
      content: '是否需要保存当前画布?',
      okLoading,
      cancelText: '不保存',
      okText: '保存',
      hideCancel: false,
      onBeforeOk: async () => {
        try {
          await savePage()
          okLoading = true
          await onChangePage(item)
        } catch (e) {
          console.log(e)
          okLoading = true
        }
        return true
      },
      onCancel: async () => {
        await onChangePage(item)
      }
    })
  } catch (e) {
    console.log(e)
  }
}
</script>

<template>
  <div class="graph-page-card rounded bg-white p-1">
    <div
      class="flex items-center cursor-pointer transition-all rounded h-[32px] px-2 text-[13px] text-arco-neutral-8"
      @click="isToggle = !isToggle"
    >
      <span class="font-bold">全部页面</span>
      <span> ({{ pageList.length }}) </span>
      <a-button size="mini" type="text" class="mx-1">
        <template #icon>
          <down theme="outline" :size="16" />
        </template>
      </a-button>
      <a-tooltip content="添加页面" size="mini">
        <a-button
          size="mini"
          type="text"
          @click.stop="handleClickAddPage"
          class="ml-auto"
        >
          <template #icon>
            <add theme="outline" :size="16"></add>
          </template>
        </a-button>
      </a-tooltip>
    </div>
    <div
      class="p-1 border-t mt-2 min-w-[200px] text-arco-neutral-8"
      v-show="isToggle && pageList.length"
    >
      <VueDraggable
        v-model="pageList"
        :animation="150"
        handle=".handle"
        @end="handleSortCanvasPage"
      >
        <div
          v-for="(item, index) in pageList"
          :key="item.id"
          @click="handleChangePage(item)"
          :class="{ 'bg-arco-fill-2 text-black': item.id === activePageId }"
          class="mb-1 p-1 flex items-center rounded hover:bg-arco-fill-2  hover:text-arco-neutral-10 transition-all cursor-pointer duration-300"
        >
          <a-button class="handle cursor-move" type="text" size="mini">
            <template #icon>
              <drag theme="outline" />
            </template>
          </a-button>
          <a-tooltip :content="item.pageName" :mouse-enter-delay="1000">
            <span> 页面{{ index + 1 }} </span>
          </a-tooltip>

          <a-space class="ml-auto" size="mini" v-if="item.id === activePageId">

            <a-popconfirm
              content="确定复制当前所选页面吗？"
              okText="复制"
              cancelText="取消"
              type="warning"
              @ok="handleCopyCanvasPage(item)"
            >
              <a-button size="mini">
                <template #icon>
                  <Copy theme="outline" />
                </template>
              </a-button>
            </a-popconfirm>
            <a-popconfirm
              content="确定删除当前所选页面吗？"
              okText="删除"
              cancelText="取消"
              type="warning"
              @ok="handleDelCanvasPage(item)"
            >
              <a-button size="mini" v-if="pageList.length > 1">
                <template #icon>
                  <delete theme="outline" />
                </template>
              </a-button>
            </a-popconfirm>
          </a-space>
        </div>
      </VueDraggable>
    </div>
  </div>
</template>

<style scoped lang="less">
.graph-page-card {
  position: absolute;
  left: 10px;
  top: 10px;
}
</style>
